<template>
  <vxe-modal v-model="dialogVisible" append-to-body title="报告发送登记" width="60%" :before-close="clear"
    :destroy-on-close="true">

    <p class="common-title"><span class="titleName">基本信息</span></p>
    <Form v-model="form" :formOptions="contractFormOptions" />

    <p class="common-title"><span class="titleName">报告信息</span></p>
    <div class="anthorContent-item">
      <Form v-model="reportForm" :formOptions="reportFormOptions" />
    </div>

    <div slots="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </vxe-modal>
</template>
<script>
import VXETable from 'vxe-table';
import Form from '/@/components/PartForDialog/form.vue';
export default {
  components: { Form },
  data() {
    return {
      dialogVisible: false,
      form: {
        sampleId: '',
        projectName: '',
        reportNumber: '',
        itemName: '',
      },
      contractFormOptions: {
        column: 3,
        items: [
          {
            title: '工程名称',
            field: 'projectName',
            type: 'input',
            disabled: true,
          },
          {
            title: '报告编号',
            field: 'reportNumber',
            type: 'input',
            disabled: true,
          },
          {
            title: '检测项目',
            field: 'itemName',
            type: 'input',
            disabled: true,
          },
        ],
      },
      reportForm: {
        sendTime: new Date(),
        sendUserName: null,
        sendUserId: null,
        // fileName: '',
        // fileSize: '',
        // fileUrl: '',
        fileList: []
      },
      reportFormOptions: {
        column: 3,
        items: [
          {
            title: '发送报告日期',
            field: 'sendTime',
            type: 'date',
            disabledMethod: function (val) {
              if (val.date.getTime() >= new Date().getTime()) {
                return true
              }
            }
          },
          {
            title: '登记人',
            field: 'sendUserName',
            type: 'input',

          },
          {
            title: '附件',
            field: '',
            isOneLine: true, // 独占一行
            slots: { default: 'file' },
          },
        ],
      },
    };
  },
  watch: {
    dialogVisible(newVal) {
      if (newVal === true) {
        this.getUsername(); // 调用getUsername方法
      }
    },
  },
  methods: {
    clear() {
      this.reportForm = {
        sendTime: null,
        sendName: null,
        fileName: '',
        fileSize: '',
        fileUrl: '',
      };
    },
    save() {
      // const pObj = {
      //   fileList: [
      //     {
      //       fileName: this.reportForm.fileName || '',
      //       fileSize: this.reportForm.fileSize || 0,
      //       fileUrl: this.reportForm.fileUrl || '',
      //       id: ''
      //     }
      //   ],
      //   sampleId: this.form.sampleId || '',
      //   sendTime: this.reportForm.sendTime,
      //   sendUserId: '',
      //   sendUserName: this.reportForm.sendName
      // }
      // console.log(111, this.form, this.reportForm);
      
      this.$api.addReportSend({ ...this.form, ...this.reportForm }).then((res) => {
        VXETable.modal.message({
          content: '检测报告发送登记成功',
          status: 'success',
        });

        this.dialogVisible = false;
      });
    },
    getUsername() {
      const userInfos = JSON.parse(localStorage.getItem("userInfo"))
      // console.log(userInfos,66);
      // this.reportForm.sendName = userInfos.userName
      this.reportForm.sendUserName = userInfos.userName
      this.reportForm.sendUserId = userInfos.userId
    }
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .table-normal .vxe-body--row .vxe-body--column {
    height: 40px !important;
  }

  .vxe-modal--box {
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}
</style>
